<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-分级阅读-' + courseName + '-' + levelName">
        </Breadcrumb>
        <view class="content">
          <view class="content_left">
            <view class="detail">
              <view class="article">
                <view class="article_title">{{ articleTitle }}</view>
                <u-parse
                  class="article_content"
                  ref="uParse"
                  :html="articleEnglish"
                  :selectable="true"
                ></u-parse>
              </view>
              <view class="translate" v-show="isShowTranslate">
                <view class="translate_title">译文</view>
                <u-parse
                  class="translate_content"
                  ref="uParse"
                  :html="articleChinese"
                  :selectable="true"
                ></u-parse>
              </view>
            </view>
          </view>
          <view class="content_right">
            <view class="options">
              <view
                class="options_content"
                v-for="(item, index) in subjectList"
                :key="index"
              >
                <view class="options_title">
                  <view class="options_number">{{ index + 1 }}</view>
                  <view class="options_title_text">
                    {{ item.question }}
                  </view>
                </view>
                <view class="options_list">
                  <u-radio-group
                    v-model="item.choiceAnswer"
                    :disabled="isShowAnswer"
                    size="36"
                  >
                    <u-radio
                      active-color="#9CFB20"
                      v-for="(element, index) in item.optionsList"
                      :key="index"
                      :name="element.name"
                    >
                      {{ element.value }}
                    </u-radio>
                  </u-radio-group>
                </view>
                <template v-if="isShowAnswer">
                  <view class="options_answer">
                    <view class="options_answer_title">
                      <text>正确答案：{{ item.answer }}</text>
                    </view>
                    <view class="options_answer_text">
                      答案解析︰{{ item.analysis }}
                    </view>
                  </view>
                  <view class="options_img">
                    <image
                      v-if="item.isCorrect"
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                      mode="widthFix"
                    ></image>
                    <image
                      v-else
                      src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                      mode="widthFix"
                    ></image>
                  </view>
                </template>
              </view>
            </view>
            <view class="button" @click="submit()" v-if="!isShowAnswer">
              <text>交卷</text>
            </view>
            <view class="button" @click="handleBack()" v-else>
              <text>返回</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup" v-if="isSubmit">
      <view
        class="popup_container animate__animated animate__faster animate__fadeInDown"
      >
        <view class="alert">
          <view class="alert_info">
            <image
              v-if="isPass"
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/laugh.png"
              mode="widthFix"
            ></image>
            <image
              v-else
              src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/cry.png"
              mode="widthFix"
            ></image>
            <view class="alert_info_text">
              <text>{{ score }}分</text>
            </view>
          </view>
          <template v-if="isPass">
            <view class="alert_text" v-if="hasGold">
              恭喜您！已通关，解锁成功 。奖励金币<text style="color: #0091ea">{{
                goldNum
              }}</text
              >个
            </view>
            <view class="alert_text" v-else>恭喜你 ! 已通关。</view>
          </template>
          <view class="alert_text" v-else> 很遗憾!未通关，解锁失败。 </view>
          <view class="alert_button">
            <view class="alert_button_content" @click="viewAnswers()">
              查看答案
            </view>
            <view class="alert_button_content active" @click="handleBack()">
              返回
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getArticleAndQuestion, saveArticleRecord } from "@/api/read";
import { selectVoByWord } from "@/api/sync";
export default {
  components: {},
  computed: {
    courseName() {
      return this.courseNameObject[this.courseId];
    },
    levelName() {
      return this.levelNameObject[this.levelId];
    },
  },
  onLoad(option) {
    this.courseId = option.courseId;
    this.levelId = option.levelId;
    this.articleId = option.articleId;
    this.init();
  },
  data() {
    return {
      routeList: [
        {
          name: "主页",
          url: "",
        },
        {
          name: "分级阅读",
          url: "",
        },
      ],
      courseNameObject: {
        1: "小学英语分级精读训练",
        2: "初中英语分级精读训练",
        3: "高中英语分级精读训练",
        4: "初一英语阅读专项训练",
        5: "初二英语阅读专项训练",
        6: "初三英语阅读专项训练",
      },
      levelNameObject: {
        1: "一级阅读",
        2: "二级阅读",
        3: "三级阅读",
        4: "四级阅读",
        5: "五级阅读",
        6: "六级阅读",
        7: "基础训练",
        8: "提升训练",
        9: "冲刺训练",
        10: "实战考场",
      },
      courseId: "",
      levelId: "",
      chapterName: "",
      articleId: "",
      articleTitle: "",
      articleEnglish: "",
      articleChinese: "",
      subjectList: [],
      isShowAnswer: false,
      isSubmit: false,
      isShowTranslate: false,
      hasGold: false,
      goldNum: 0,
      allScore: 100,
      passScore: 80,
      singleScore: 0,
      score: 0,
      correctNumber: 0,
      isPass: false,
      currentIndex: 0,
      isSlide: false,
    };
  },
  methods: {
    init() {
      this.getDetail();
    },
    getDetail() {
      let params = {
        articleId: this.articleId,
      };
      getArticleAndQuestion(params).then((res) => {
        let article = res.data;
        this.chapterName = article.chapterName;
        this.articleTitle = article.articleTitle;
        this.articleEnglish = article.articleContent;
        this.articleChinese = article.articleChinese;
        let subjectList = res.data.questionList;
        this.subjectList = subjectList;
        this.subjectList.forEach((element) => {
          let optionsList = [];
          if (element.optiona) {
            optionsList.push({
              name: "A",
              value: element.optiona,
            });
          }
          if (element.optionb) {
            optionsList.push({
              name: "B",
              value: element.optionb,
            });
          }
          if (element.optionc) {
            optionsList.push({
              name: "C",
              value: element.optionc,
            });
          }
          if (element.optiond) {
            optionsList.push({
              name: "D",
              value: element.optiond,
            });
          }
          this.$set(element, "optionsList", optionsList);
          this.$set(element, "choiceAnswer", "");
          this.$set(element, "isCorrect", false);
        });
        this.singleScore = this.allScore / this.subjectList.length;
      });
    },
    submit() {
      this.subjectList.forEach((element) => {
        if (element.choiceAnswer === element.answer) {
          this.correctNumber++;
          element.isCorrect = true;
        }
      });
      this.score = this.correctNumber * this.singleScore;
      this.isPass = this.score >= this.passScore ? true : false;
      if (this.isPass) {
        let params = {
          articleId: this.articleId,
        };
        saveArticleRecord(params).then((res) => {
          this.hasGold = res.data.hasGold;
          this.goldNum = res.data.goldNum;
        });
      }
      this.isSubmit = true;
    },
    viewAnswers() {
      this.isSubmit = false;
      this.isShowAnswer = true;
      this.isShowTranslate = true;
    },
    handleBack() {
      uni.redirectTo({
        url: `/pages/read/readChapter?courseId=${this.courseId}&levelId=${this.levelId}&courseName=${this.courseName}&levelName=${this.levelName}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./readDetail";
</style>
